<template>
  <div id="self-container">
    <NavBar type="main"></NavBar>
    <main class="self-main main-layout">
      <div class="self-left">
        <div class="self-info card">
          <div style="display: flex;flex-direction: column;align-items: center">
            <div style="height: 100px;width: 100px;">
              <img style="width: 100%;height: 100%;border-radius: 50px" :src="userInfo.avatar" >
            </div>
            <div style="margin-top: 20px;font-weight: bold">{{userInfo.nickname}}</div>
          </div>
        </div>
        <div class="self-menu card">
          <SideNav :menu="menu"></SideNav>
        </div>
      </div>
      <div :class="['self-right',{'card': $route.name !== 'self-center'}]">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
import SideNav from "_c/SideNav";
import NavBar from "_c/HeadNav";
export default {
  name: "Self",
  components: {NavBar, SideNav},
  data() {
    return {
      userInfo:{
        nickname:"无恙",
        avatar:"https://cdn.pixabay.com/photo/2022/04/29/09/19/yarn-7162973__340.jpg"
      },
      menu: [{
        title: '个人中心',
        to: {
          name: 'self-center'
        },
        page: ['self-center']
      }, {
        title: '我的课程',
        to: {
          name: 'self-course'
        },
        page: ['self-course']
      }, {
        title: '我的收藏',
        to: {
          name: 'self-collection'
        },
        page: ['self-collection']
      }, {
        title: '我的订单',
        to: {
          name: 'self-order'
        },
        page: ['self-order']
      }],
    }
  },
  methods: {
    getProfile(){
      this.$api.getProfile().then(({data})=>{
        this.userInfo = data.data
        this.userInfo.avatar = 'https://pic.imgdb.cn/item/62a1bd5c0947543129a9ad74.jpg'
      })
    },
  },
  mounted() {
    this.getProfile()
    /*this.$Tip('.record', {
      content: 'test!'
    });*/
  }
}
</script>

<style scoped lang="scss">
.self-main {
  display: flex;
}
.self-left {
  flex-basis: 200px;
  margin-right: 20px;
}
.self-info {
  height: 150px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.self-menu {
  padding: 10px 0;
}
.self-right {
  flex: 1;
}



</style>
